<template>
  <div class="h-screen w-screen">
    <!-- topbg -->
    <div class="w-screen h-[522rpx] bg-[#e1f2f4]">
      <div class="flex flex-col items-center">
        <image
          class="w-[160rpx] h-[160rpx] mt-[140rpx]"
          :src="getOss('/temp/login_logo_icon@3x_1684487687796.png')"
        ></image>
        <div
          class="text-[#333] text-center text-[16px] font-[500] mt-[22rpx]"
        ></div>
        广州安全生产风险电子地图
      </div>
    </div>

    <!-- tab -->
    <div
      class="bg-white rounded-t-[40rpx] min-h-[600rpx] translate-y-[-110rpx]"
    >
      <div class="pt-[28rpx] pr-[28rpx] pb-0 pl-[38px]">
        <u-tabs
          :list="radiolist"
          @click="tabClick"
          :scrollable="false"
          lineColor="#0EB9B3"
          lineWidth="40rpx"
          lineHeight="8rpx"
          :activeStyle="{
            fontSize: '32rpx',
            fontWeight: 'bold',
            color: '#333333',
          }"
          :inactiveStyle="{
            fontWeight: '500',
            color: '#666666',
            fontSize: '28rpx',
          }"
          itemStyle="height: 68rpx;width: 210rpx"
        ></u-tabs>
      </div>
      <!-- 账号 -->
      <div class="pl-[70rpx] pr-[70rpx]">
        <div class="flex items-center mt-[88rpx]">
          <img
            class="w-[30rpx] h-[30rpx] mr-[14rpx]"
            :src="getOss('/temp/id_icon@3x_1684832527049.png')"
            alt=""
          />
          <span class="text-[14px]">账号</span>
        </div>
        <u-input
          class="input"
          v-model="form.username"
          placeholder="请输入你的登录账号"
          placeholderClass="placeholder_input"
          border="bottom"
        />

        <!-- 密码 -->
        <div class="mt-[46rpx]">
          <div class="flex items-center mt-[88rpx]">
            <img
              class="w-[30rpx] h-[30rpx] mr-[14rpx]"
              :src="getOss('/temp/password_icon@3x_1684832517306.png')"
              alt=""
            />
            <span class="text-[14px]">密码</span>
          </div>
          <u-input
            class="input"
            v-model="form.password"
            placeholder="请输入你的登录密码"
            placeholderClass="placeholder_input"
            border="bottom"
            v-if="!showPassword"
            type="password"
          />
          <u-input
            class="input"
            v-model="form.password"
            placeholder="请输入你的登录密码"
            placeholderClass="placeholder_input"
            border="bottom"
            v-else
            type="text"
          />
          <div class="relative z-10" @click.stop="showPassword = !showPassword">
            <image
              v-if="!showPassword"
              class="w-[48rpx] h-[48rpx] absolute positioned right-0 bottom-[22rpx]"
              :src="getOss('/temp/closeeye_icon@3x_1684832500347.png')"
            ></image>
            <image
              v-else
              class="w-[48rpx] h-[48rpx] absolute positioned right-0 bottom-[22rpx]"
              :src="getOss('/temp/openeye_icon@3x_1684832484534.png')"
            ></image>
          </div>
        </div>
        <!-- 同意 -->
        <div class="mt-[50rpx]">
          <div
            class="mt-[20rpx] flex items-center"
            @click="checkedSelf = !checkedSelf"
          >
            <image
              class="w-[28rpx] h-[28rpx] mr-[12rpx]"
              v-if="!checkedSelf"
              :src="getOss('/temp/checkbox_icon_nor@3x_1684832463391.png')"
            ></image>
            <image
              class="w-[28rpx] h-[28rpx] mr-[12rpx]"
              v-else
              :src="getOss('/temp/checkbox_icon_sel@3x_1684832444564.png')"
            ></image>
            <div class="text-[#B6B6B6] flex">
              本人已阅读并同意
              <div @click.stop="goAgreement()">《用户协议》</div>
            </div>
          </div>
        </div>
        <!-- 登录按钮 -->
        <div
          class="w-full h-[92rpx] rounded-[92rpx] flex items-center justify-center text-[#fff] text-[18px] mt-[46rpx]"
          :class="
            checkedSelf
              ? ' bg-gradient-to-r to-[#1BCCA6] from-[#10BCB1]'
              : 'bg-[#B6B6B6]'
          "
          @click="gologin"
        >
          登录
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
// utils
import { getOssBgUrl, getOss } from '@/utils/useOss'
import { isNull } from '@/utils/verify'
// hooks
import { useLoading } from '@/hooks/useLoading'
const { setLoading, loading } = useLoading()
// api
import { login } from '@/api/modules/login'
// types
import { LoginForm } from '@/types/login'
// tabs 切换列表
const radiolist = [
  { name: '监管人员', value: 'supervise' },
  { name: '企业管理员', value: 'ent' },
  { name: '企业员工', value: 'employee' },
]
// 切换 tab
const radiovalue1 = ref('supervise')
function tabClick(item: any) {
  radiovalue1.value = item.value
}
//账号
const form = reactive<LoginForm>({
  username: '广州市测试有限公司',
  password: '123456',
  captcha: '', //验证码
})
// 展示密码
const showPassword = ref(false)
const checkedSelf = ref(false) //用户同意
const isAccount = ref(true) ////是否账号登录--手机号码
// 跳转用户协议页面
function goAgreement() {
  uni.navigateTo({
    url: './agreement/agreement',
  })
}
// 登录按钮
async function gologin() {
  if (!checkedSelf.value) {
    uni.showToast({
      title: '没勾选以下内容',
      icon: 'none',
    })
    return
  }
  if (isAccount.value) {
    await isNull('账号', form.username)
    await isNull('密码', form.password)
  }
  let userType = radiovalue1.value
  setLoading(true)
  const res = await login({ ...form, userType })
  uni.showToast({
    title: '登录成功',
    icon: 'none',
  })
  console.log('====================================')
  console.log('登录成功', res)
  console.log('====================================')
}
</script>

<style scoped></style>
